<template>
  <!-- <div> -->
  <p>自己的: {{ car }}</p>
  <!-- <p>a: {{ a.car }}</p> -->
  <button @click="changeA">changeA</button>
  <button @click="changeB">changeB</button>

  <!-- <p>b: {{ b.car }}</p> -->
  <button @click="changeAll($refs)">changeAll</button>

  <br />
  <hr />
  <refsChildA ref="a"></refsChildA>
  <refsChildB ref="b"></refsChildB>
  <!-- </div> -->
</template>
<script setup lang="ts">
import { ref } from "vue";
import refsChildB from "@/components/sub/refs-child-b.vue";
import refsChildA from "@/components/sub/refs-child-a.vue";

let car = ref("car fu");
let a = ref();
let b = ref();
console.log(a, b);
let changeA = () => {
  a.value.car = " car A !!!!";
};
/* ref */
let changeB = () => {
  b.value.car = " car B !!!!";
};
/* proxy */
let changeAll = (val: { [key: string]: any }) => {
  console.log("$refs", val);
  for (const key in val) {
    /* ref的会被自动拆包 */
    console.log("val[key]", val[key]);
    val[key].car = "car !!";
  }
};
/* 暴露出去 */
defineExpose({ car });
</script>
<style lang="scss" scoped></style>
